<template>
	<view>
		<form class="flowform" @reset="reset">
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>姓名</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.fullName" name="fullName" placeholder="输入" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>工号</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.enCode" name="enCode" placeholder="输入" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="gender">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>性别</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.gender" name="gender" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="departmentName">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>部门</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.departmentName" name="departmentName" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="positionName">
				<view class="formgroup">
					<view class="labletitle"><label>岗位</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.positionName" name="positionName" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext margin-top-20" @tap="workingNature">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>用工性质</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.workingNature" name="workingNature" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>身份证号</label></view>
					<view class="controlvalue">
						<input type="idcard" v-model="staff.idNumber" name="idNumber" placeholder="输入" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>联系电话</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.telephone" name="telephone" placeholder="输入" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="attendWorkTime">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>参加工作</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.attendWorkTime" name="attendWorkTime" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="birthday">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>出生年月</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.birthday" name="birthday" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext" @tap="education">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>最高学历</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.education" name="education" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>所学专业</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.major" name="major" maxlength="6" placeholder="输入" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext ">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>毕业院校</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.graduationAcademy" name="graduationAcademy" maxlength="6" placeholder="输入" />
					</view>
				</view>
			</view>
			<view class="formlist inputtext margin-bottom-50" @tap="graduationTime">
				<view class="formgroup">
					<view class="labletitle"><label>毕业时间</label></view>
					<view class="controlvalue">
						<input type="text" v-model="staff.graduationTime" name="graduationTime" placeholder="选择" disabled="true" />
					</view>
					<view class="advanceicon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="buttom-box">
				<view class="flow-button">
					<button class="btn-same btn-keep" form-type="reset">清空</button>
					<button class="btn-same btn-submit" @tap="submit">保存</button>
				</view>
			</view>
		</form>
		<view class="height-100"></view>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>ow="isSearchShow"></w-picker>
		<tki-tree ref="tree" :range="treelist" :multiple="multiple" :selectParent="selectParent" rangeKey="text"></tki-tree>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue'
	import tkiTree from '@/components/tki-tree/tki-tree.vue'
	import helper from '@/common/js/helper.js'
	import jnpf from '@/common/js/jnpf.js'
	import graceChecker from '@/common/js/graceChecker.js'
	let rule = [{
			name: "fullName",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "姓名不能为空"
		},
		{
			name: "enCode",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "工号：必填"
		},
		{
			name: "gender",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "选择性别"
		},
		{
			name: "positionName",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "选择岗位"
		},
		{
			name: "departmentName",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "选择部门"
		},
		{
			name: "idNumber",
			checkType: "notnull",
			checkRule: "",
			errorMsg: "输入正确身份证"
		},
		{
			name: "telephone",
			checkType: "phoneno",
			checkRule: "",
			errorMsg: "输入正确的联系方式"
		},
	];
	export default {
		components: {
			wPicker,
			tkiTree
		},
		data() {
			return {
				multiple: false, //多选
				selectParent: false, //父级可选
				staff: {
					fullName: '',
					enCode: '',
					idNumber: '',
					telephone: '',
					education: '',
					gender: '',
					birthday: '',
					workingNature: '',
					positionName: '',
					graduationTime: '',
					departmentName: '',
					attendWorkTime: ''
				},
				mode: '',
				isSearchShow:false,
				treelist: [],
				pickerList: [],
				educationList: jnpf.dictionaryData('Education'),
				genderList: [{
						label: "男",
						value: "1"
					},
					{
						label: "女",
						value: "2"
					},
					{
						label: "保密",
						value: "3"
					}
				],
				workingNatureList: [{
						label: "合同制",
						value: "1"
					},
					{
						label: "零时工",
						value: "2"
					},
					{
						label: "实习生",
						value: "3"
					}
				],
				positionNameList: [],
				departmentNameList: []
			}
		},
		onLoad(e) {
			if (Object.prototype.hasOwnProperty.call(e, 'id')) {
				helper.ajax({
					url: '/api/Extend/Employee/' + e.id,
					method: 'GET',
					success: res => {
						let _staff = res.data.data
						this.staff = _staff;
						this.staff.attendWorkTime = helper.toDate(_staff.attendWorkTime, 'yyyy-MM-dd');
						this.staff.birthday = helper.toDate(_staff.birthday, 'yyyy-MM-dd');
						this.staff.graduationTime = helper.toDate(_staff.graduationTime, 'yyyy-MM-dd');
					}
				});
				uni.setNavigationBarTitle({
					title: "职员编辑"
				});
			}
			helper.ajax({
				url: '/api/Permission/Position/Selector',
				success: res => {
					this.positionNameList = res.data.data.list;
				}
			});
			helper.ajax({
				url: '/api/Permission/Organize/Department/Selector',
				success: res => {
					this.departmentNameList = res.data.data.list;
				}
			});
		},
		methods: {
			departmentName() {
				this.treelist = this.departmentNameList;
				this.selectParent = true;
				this.multiple = false;
				this.$refs.tree._show();
				this.$eventHub.$off('treemodality');
				this.$eventHub.$on('treemodality', (data) => {
					this.staff.departmentName = data[0].fullName;
					this.$eventHub.$off('treemodality');
				});
			},
			positionName() {
				this.treelist = this.positionNameList;
				this.multiple = true;
				this.selectParent = false;
				this.$refs.tree._show();
				this.$eventHub.$off('treemodality');
				this.$eventHub.$on('treemodality', (data) => {
					let positionName = new Array()
					for (let i = 0; i < data.length; i++) {
						positionName.push(data[i].fullName);
					}
					this.staff.positionName = positionName.toString();
					this.$eventHub.$off('treemodality');
				});
			},
			gender() {
				this.pickerList = this.genderList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.gender = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			workingNature() {
				this.pickerList = this.workingNatureList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.workingNature = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			education() {
				this.pickerList = this.educationList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.education = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			birthday() {
				this.mode = "date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.birthday = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			graduationTime() {
				this.mode = "date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.graduationTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			attendWorkTime() {
				this.mode = "date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.staff.attendWorkTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			submit() {
				let formData = this.staff
				if (!graceChecker.check(formData, rule)) {
					helper.msg(graceChecker.error);
					return;
				}
				let url = "/api/Extend/Employee";
				let method = "POST";
				if(formData.id){
					url = url+"/"+formData.id;
					method = "PUT";
				}
				formData.attendWorkTime=Date.parse( formData.attendWorkTime);
				formData.birthday=Date.parse( formData.birthday);
				formData.startTime=Date.parse( formData.startTime);
				formData.graduationTime=Date.parse( formData.graduationTime);
				helper.ajax({
					url: url,
					method: method,
					contentType:"application/json",
					data: formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						uni.navigateBack();
					}
				});
			},
			reset(e) {
				// console.log('清空数据')
			},
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
</style>
